<template>
	<view class="">
		<view v-if="cartList.length>0">
			<view class="flex padding" v-for="(item,index) in cartList" :key="index">
				<view class="flex align-center">
					<text 
						class="iconfont icon-gouxuan margin-right"
						:class="item.ischeck?'color-yellow':''"
						@click="docheck(index)"
					></text>
					<image class="poster margin-right" :src="item.img" mode=""></image>
				</view>
				<view class="flex justify-between info">
					<view class="">
						{{item.name}}
						<view class="margin-tb-xs" @tap="delcart(index)">{{item.french}}</view>
						￥{{item.list[item.idx].price}}
					</view>
					<view class="flex flex-direction align-end">
						<view @click="doedit(index)" class="edit margin-bottom-xs">
							<text class="iconfont icon-bianji"></text>
						</view>
						{{item.list[item.idx].spec}}
						 X 
						{{item.num}}
					</view>
				</view>
			</view>
			<!-- 弹窗 -->
			<u-overlay v-if="show" :show="show" @click="show = false">
				<view class="bg-fff margin cover-cont" @click.stop>
					<view class="padding">
						<view class="flex justify-between info">
							<image class="poster margin-right" src="" mode=""></image>
							<view class="">
								{{cartList[cartIdx].name}}
								<view class="margin-tb-xs">{{cartList[cartIdx].french}}</view>
								￥{{checkedCartInfo.price}} 
							</view>
						</view>
						<view class="flex justify-between padding-tb u-border-bottom">
							<view class="">
								规格选择
							</view>
							<view class="drop">
								<view @click="dropShow=!dropShow">
									{{checkedCartInfo.spec}} 
									-
									{{checkedCartInfo.edible}}
									<text class="iconfont icon-xiala"></text>
								</view>
								<view class="drop-list bg-fff" v-if="dropShow">
									<view 
										v-for="(item,index) in cartList[cartIdx].list" 
										:key="index"
										class="padding-sm"
										@click="dodrop(index)"
									>
										{{item.spec}} - {{item.edible}}
									</view>
								</view>
							</view>
						</view>
						<view class="flex justify-between align-center padding-tb-sm u-border-bottom">
							<view class="">
								数量选择
							</view>
							<u-number-box button-size="26" v-model="num" @change="donum"></u-number-box>
						</view>
					</view>
					<view class="flex margin-top">
						<button @click="show=false" type="default" class="cu-btn lg bg-brown">取消</button>
						<button @click="dosubmit" type="default" class="cu-btn lg bg-yellow">确认</button>
					</view>
				</view>
			</u-overlay>
			
			<view class="fixed bg-fff flex">
				<view class="flex flex-sub padding align-center">
					<text 
						class="iconfont icon-gouxuan margin-right-xs"
						:class="allInfo.yn?'color-yellow':''"
						@click="doall(allInfo.yn)"
					></text>全选
					<view class="margin-left">
						共计:{{allInfo.csum}}
					</view>
				</view>
				<view @click="goorder" class="bg-yellow padding text-center color-fff">
					立即结算
				</view>
			</view>
		</view>
		<view class="text-center" v-else>还是空的哟</view>
	</view>
</template>

<script>
	import {mapState,mapMutations,mapGetters} from 'vuex'
	export default {
		data() {
			return {
				cartIdx:0,
				dropIdx:0,
				show:false,
				dropShow:false,
				num:0
			}
		},
		onLoad() {
			if(this.userinfo){
				return
			}
			// 如果状态机没用户信息，则拦截让用户登录
			uni.showModal({
				title:'温馨提示',
				content:'您需要先登录才能进行您的操作',
				cancelText:'稍后再说',
				confirmText:'立即登录',
				success: ({cancel}) => {
					if(cancel){
						uni.navigateBack({
							delta:1
						})
						return
					}
					uni.navigateTo({
						url:'../user/login'
					})
				}
			})
		},
		computed:{
			...mapState({
				cartList:state => state.cart.cartList,
				userinfo:state => state.user.userinfo
			}),
			// ...mapGetters(['allInfo'])  // 作用与下面一样，xiaolu为什么这样写？
			...mapGetters({
				allInfo:'allInfo'
			}),
			checkedCartInfo(){ //过滤下拉选中的商品对象
				let {cartIdx,cartList,dropIdx} = this
				return cartList[cartIdx].list[dropIdx]
			}
		},
		methods: {
			// 如果名字不一样或加了命名空间，就需要用对象的形式来释放到这了
			// ...mapMutations({docheck:'docheck',doall:'doall'})
			...mapMutations(['docheck','doall','delcart']),
			// 点商品后的编辑，显示规格选框，修改当前商品ID,初始化该商品下状态机里的规格ID及数量，不改状态机数据
			doedit(idx){
				this.show = true;
				this.cartIdx = idx;
				this.dropIdx = this.cartList[idx].idx;
				this.num = this.cartList[idx].num;
				this.$store.commit("delidx");
			},
			// 点选规格时，隐藏选框，修改当前规格ID，不改状态机数据
			dodrop(idx){
				this.dropShow = false;
				this.dropIdx = idx;
			},
			// 在规格框中修改商品数量，与规格无关
			donum(e){
				// console.log(e);
				this.num = e.value;
			},
			// 规格修改后，点确定后隐藏整体弹窗，更新状态机数据
			dosubmit(){
				this.show = false;
				let {cartIdx,dropIdx,num} = this;
				this.$store.commit("dosubmit",{cartIdx,dropIdx,num});
				// this.$store.commit("delidx");
			},
			goorder(){
				uni.navigateTo({
					url:"orderadd"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		padding-bottom: 100upx;
	}
	.poster{
		width: 180upx;
		height: 180upx;
		background-color: #d8d8d8;
	}
	.info{
		width: 60%;
		.edit{
			width: 80upx;
			height: 80upx;
			text-align: center;
			line-height: 80upx;
			background-color: #e6e6e6;
			border-radius: 50%;
			
		}
	}
	.flex.align-end{
		min-width: 210upx;
	}
	.icon-gouxuan{
		color: #e7e7e7;
	}
	.cu-btn.lg{
		width: 50%;
	}
	.cover-cont{
		position: absolute;
		top: 50%;
		left: 0;
		width: 690upx;
		transform: translateY(-50%);
		border-radius: 10upx;
	}
	.drop{
		position: relative;
	}
	.drop-list{
		width: 300upx;
		position: absolute;
		top: 60upx;
		right: 0;
		box-shadow: 0 0 10upx 2upx rgba(0,0,0,0.2);
		z-index: 10;
		view:hover{
			background-color: #e6e6e6;
		}
	}
</style>
